<template>
  <div class="page-container">
	<!--工具栏-->
	<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
		<el-form :inline="true" :size="size">
			<el-form-item>
				<el-select v-model="requestParams.keywords" :size="size" clearable placeholder="选择分类"
				@change="categorySelected" @clear="categoryClear">
					<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-input v-model="requestParams.name" placeholder="应用名称"></el-input>
			</el-form-item>
			<el-form-item>
				<kt-button icon="fa fa-search" :label="$t('action.search')" perms="sys:appmarket:view" type="primary" 
				:loading="editLoading" @click="findPage"/>
				<kt-button icon="fa fa-refresh" :label="$t('action.refresh')" perms="sys:appmarket:view" type="primary" 
				:loading="editLoading" @click="refresh" />
			</el-form-item>
		</el-form>
	</div>
	<kt-card :appData="pageResult" permsInstall="sys:appmarket:install" @handleAppInfo="handleAppInfo"></kt-card>
	<el-dialog :title="'应用详情'" width="40%" :visible.sync="dialogVisible" 
	:close-on-click-modal="false" :lock-scroll="false" top="10vh">
		<el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right" class="app-form">
			<el-form-item label="chartId" v-if="false">
				<el-input v-model="dataForm.chartId" :disabled="true" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="命名空间" prop="namespaceId">
				<el-select v-model="dataForm.namespaceId" :size="size" placeholder="请选择"
				@change="categorySelected" @clear="categoryClear">
					<el-option
					v-for="item in namespacies"
					:key="item.id"
					:label="item.name"
					:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<!-- <el-form-item label="PV名称" prop="pvName">
				<el-input v-model="dataForm.pvName" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="PVC名称" prop="pvcName">
				<el-input v-model="dataForm.pvcName" auto-complete="off"></el-input>
			</el-form-item> -->
			<el-form-item label="存储位置" prop="storageId">
				<el-select v-model="dataForm.storageId" :size="size" placeholder="请选择"
				@change="categorySelected" @clear="categoryClear">
					<el-option
					v-for="item in storagies"
					:key="item"
					:label="item"
					:value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="应用名称" prop="name">
				<el-input v-model="dataForm.name" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="URL" prop="host">
				<el-input v-model="dataForm.host" auto-complete="off"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
			<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.install')}}</el-button>
		</div>
	</el-dialog>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton"
import KtCard from "@/views/Core/KtCard"
import { format } from "@/utils/datetime"
import { initWebSocket, sendMessage } from "@/utils/socket";
import * as validator from '@/utils/validate'
export default {
	components:{
		KtButton,
		KtCard
	},
	data() {
		return {
			size: 'small',
			requestParams: {name: '', keywords: ''},
			pageResult: [],
			dialogVisible: false, // 应用详情界面是否显示
			editLoading: false,
			dataFormRules: {
				name: [
					{required: true, message: '请输入', trigger: 'blur'},
					{validator: validator.validateBlank, trigger: 'blur'},
				],
				pvName: [
					{required: true, message: '请输入', trigger: 'blur'},
					{validator: validator.validateBlank, trigger: 'blur'},
				],
				pvcName: [
					{required: true, message: '请输入', trigger: 'blur'},
					{validator: validator.validateBlank, trigger: 'blur'},
				],
				host: [
					{required: true, message: '请输入', trigger: 'blur'},
					{validator: validator.validateBlank, trigger: 'blur'},
				]
			},
			dataForm: {
				chartId: '',
				namespaceId: '',
				storageName: '',
				name: '',
				pvName: '',
				pvcName: '',
				host: '',
			},
			namespacies: [],
			storagies: [],
			selectApp: {},
			options: [{
				value: 'category1',
				label: '分类A'
				}, {
				value: 'category2',
				label: '分类B'
				}, {
				value: 'category3',
				label: '分类C'
				}, {
				value: 'category4',
				label: '分类D'
				}, {
				value: 'category5',
				label: '分类E'
				}]
		}
	},
	methods: {
		categorySelected(val) {
			if(val) {
				console.log(val);
			}
		},
		categoryClear() {
			console.log("clear");
		},
		// 刷新数据
		refresh() {
			this.requestParams.name = '';
			this.requestParams.keywords = '';
			this.findPage();
		},
		// 显示应用详情界面
		handleAppInfo: function(appId){
			for (const key in this.pageResult) {
				if (this.pageResult.hasOwnProperty(key)) {
					const ele = this.pageResult[key];
					if(ele.id === appId) {
						this.selectApp = ele;
						break;
					}
				}
			}

			this.dataForm = {
				chartId: appId,
				namespaceId: '',
				storageName: '',
				name: this.selectApp.name,
				pvName: '',
				pvcName: '',
				host: '',
			},
			
			this.$api.namespace.findByAdminId().then((res) => {
				console.log(res);
				if(res.code == 200) {
					this.namespacies = res.data
					if(this.namespacies.length > 0) {
						this.dataForm.namespaceId = this.namespacies[0].id;
					}
					this.$api.userStorage.findSubPath().then((res) => {
						console.log(res);
						if(res.code == 200) {
							this.storagies = res.data
							if(this.storagies.length > 0) {
								this.dataForm.storageName = this.storagies[0]
							}
							this.dialogVisible = true
						} else {
							this.$message({message: '操作失败, ' + res.msg, type: 'error'})
						}
					})
				} else {
					this.$message({message: '操作失败, ' + res.msg, type: 'error'})
				}
			})
		},
		submitForm() {
			this.$refs.dataForm.validate((valid) => {
				if (valid) {
					let params = Object.assign({}, this.dataForm)
					console.log(params);
					this.$api.apps.appInstall(params).then((res) => {
						console.log(res);
						if(res.code == 200) {
							this.$message({message: '应用安装完成', type: 'success'})
							this.dialogVisible = false
						} else {
							this.$message({message: '应用安装失败, ' + res.msg, type: 'error'})
						}
					})
				}
			})
		},
		// 获取数据
		findPage: function (data) {
			this.editLoading = true
			this.$api.apps.findAppMarket(this.requestParams).then((res) => {
				console.log(res);
				this.editLoading = false
				if(res.code == 200) {
					this.pageResult = res.data 
				} else {
					this.$message({message: '操作失败, ' + res.msg, type: 'error'})
				}
			}).then(data!=null?data.callback:'')
		}
	},
	mounted() {
		this.findPage();
	}
}
</script>

<style scoped lang="scss">
	.app-form {
		max-height: 50vh;
    	overflow: auto;
	}
	.app-form .el-select {
		width: 100%;
	}
</style>